<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>节目列表</title>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/lib/flatpickr/flatpickr.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
    
</head>

<body>

    <div class="app-page">
        <div class="app-page-header">
            <div class="page-title">发布列表</div>
        </div>

        <div class="app-page-content">
            <div class="app-card">
                <div class="app-card-body">
                    <form class="filter">
                    	<div class="filter-group">
                    		<div class="filter-item">
	                    		<div class="form-item row">
	                    			<div class="label">时间</div>
	                                <div class="body">
	                                    <select name="timeType" id="timeType">
	                                        <option value="time_accepted">接收时间</option>
	                                        <option value="time_finished">完成时间</option>
	                                    </select>
	                                </div>
	                            </div>
                            </div>
                    		<div class="filter-item">
                                <div class="form-item row">
                                    <div class="body">
                                        <input type="text" name="startTime" id="startTime" class="flatpickr-datetime">
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="body">
                                        <input tm,nbype="text" name="endTime" id="endTime" class="flatpickr-datetime">
                                    </div>
                                </div>
                            </div>
                    	</div>
                    	
                    	<div class="filter-group">
                    		<div class="filter-item">
                                <div class="form-item row">
                                	<div class="label">下载状态</div>
                                    <div class="body">
	                                    <select name="deviceDownState" id="deviceDownState">
	                                    	<option value="">请选择</option>
	                                        <option value="0">已下载</option>
	                                        <option value="1">正在下载</option>
	                                        <option value="2">下载失败</option>
	                                    </select>
	                                </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                	<div class="label">校验状态</div>
                                    <div class="body">
	                                    <select name="checkType" id="checkType">
	                                    	<option value="">请选择</option>
	                                        <option value="0">成功</option>
	                                        <option value="1">失败</option>
	                                    </select>
	                                </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                	<div class="label">发布ID</div>
                                    <div class="body">
                                        <input type="text" name="publishId" id="publishId">
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                	<!-- <button class="z-btn z-primary">查询</button> -->
                                	<input type="button" class="z-btn z-mal z-primary" onclick="renderData();" value="查询">
                                </div>
                            </div>
                        </div>
                    	
                    </form>

                    <table class="z-table">
                        <thead>
                            <th>发布ID</th>
                            <th>发布方式</th>
                            <th>接收时间</th>
                            <th>完成时间</th>
                            <th>已下载终端数</th>
                            <th>校验状态</th>
                            <th>下载状态</th>
                            <th>操作</th>
                        </thead>
                        <tbody id="tbody"> </tbody>
                    </table>
                </div>
                <div class="app-card-body">
                	<div class="app-list-total z-mab">
                        <span id="countTotal">总计：<i>[[${count_total}]]</i></span>
                        <span id="countSuccess">成功：<i>[[${count_success}]]</i></span>
                        <span id="countFailed">失败：<i>[[${count_failed}]]</i></span>
                        <span id="countDownloading">下载中：<i>[[${count_downloading}]]</i></span>
                    </div>
                    <!-- 前端分页 -->
                    <div class="pagination z-pat z-fr"></div>
                </div>
            </div>
        </div>
    </div>
	
    <script th:src="@{/lib/jquery.min.js}"></script>
    <script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
    <script th:src="@{/js/popup.js}"></script>
    <script th:src="@{/js/form.js}"></script>
    <script th:src="@{/js/admin/app.js}"></script>
    <script th:src="@{/js/pagination.js}"></script>
    <script th:src="@{/lib/flatpickr/flatpickr.js}"></script>
    <script th:src="@{/lib/flatpickr/zh.js}"></script>
    <script th:inline="javascript">
       var context = [[${#httpServletRequest.getContextPath()}]];
	   var pageNum;//记录分页-页码
	   var pageSize;//记录分页-每页条数
	   var total; //记录总的记录数
       
	   // 时间插件
       flatpickr.localize(flatpickr.l10ns.zh);
       flatpickr(".flatpickr-datetime", {
	        enableTime: true,
	        enableSeconds: true,
    	});
       // 分页插件初始化
       var pagination = new Pagination(".pagination", {
            pageIndex: 1, 
            pageSize: 20, 
            count : 0,
            maxButtonCount: 5, // 分页按钮数量(可选)
            // 分页切换事件
            onPageChanged: function(pageIndex) {
                pageNum = pageIndex;// 当前点击的页码数记录下来。以便调用后台查询接口时传入正确的分页参数
                renderData();
            }
        })
        	
	   	// 页面加载完毕 首次查询数据 
	   	renderData();
       
        function renderData() {
        	var timeType = $("#timeType").val();
        	var startTime = $("#startTime").val();
        	var	endTime = $("#endTime").val();
        	var deviceDownState = $("#deviceDownState").val();
        	var checkType = $("#checkType").val();
        	var	publishId = $("#publishId").val();
        	 $.ajax({
                 type: 'post',
                 dataType: 'json',
                 url: context + '/programJson/getProgramJsons',
                 data: {
                	 		timeType:timeType,
                	 		startTime:startTime,
                	 		endTime:endTime,
                	 		deviceDownState:deviceDownState,
                	 		checkType:checkType,
                	 		publishId:publishId,
	                	 	pageNum:pageNum,
	                	 	pageSize:pageSize
                	    },
                 cache: false,
                 async: false,
                 success: function (data) {
                     if( data.code == 0 ) {
                    	 appendRecord(data.data.record);
                    	 
                    	 // 分页渲染
                   		 pagination.options.count = data.data.total;
                   	     console.log('pageIndex:' + data.data.pageNum + "<>" + "total:" +  data.data.total);
                         pagination.render();
                     }else {
                    	 alert(data.msg);
                     }
                 }
             });
        }
        
        function appendRecord(record){
       		var html = "";
        	for ( var i=0; i<record.length; i++ ) {
        		var r = record[i];
        			html += "<tr>                                             ";
        			/* html += "	<td class='btn-expand z-center'>               ";
        			html += "		<i class='fa fa-angle-right'></i>       ";
        			html += "	</td>                                    "; */
        			html += "	<td>" + r.programJsonId + "</td>                ";
        			html += "	<td>" + (r.publishWay==null?'定期发布':r.publishWay) + "</td>         ";
        			html += "	<td>" + formatTimeStamp(r.receiveTime) + "</td>                      ";
        			html += "	<td>" + formatTimeStamp(r.publishDoneTime) + "</td>                  ";
        			html += "	<td>" + r.deviceNum + "</td>          ";
       			 	if (r.jsonAuth == 0) {
       	                html += "	<td>成功</td>      ";
       	            } else {
       	                html += "	<td style='color:red'>失败</td>  ";
       	            }
	       			if (r.deviceDownState == 0) {
	                      html += "	<td>成功</td>     ";
	                } else if (r.deviceDownState == 1) {
	                      html += "	<td>下载中</td> ";
	                } else {
	                      html += "	<td style='color:red'>失败</td>  ";
	                }
        			/* html += "	<td class='z-center' style='color: #18da18;'>                                                   ";
        			html += "		<i class='fa fa-" + (r.jsonAuth == 0 ? 'check' : 'close') + "'></i>                                                                 ";
        			html += "	</td>                                                                                           ";
        			html += "	<td class='z-center' style='color: #18da18;'>                                                   ";
        			html += "		<i class='fa fa-" + (r.downState == 0 ? 'check' : 'close') + "'></i>                                                                 ";
        			html += "	</td>                                                                                           "; */
        			html += "	<td class='btn-group'>                         ";
        			html += "		<a href='" + context + "/programInfo/listPage?version=" + r.xcVersion + "' class='layer-open' data-title='节目详情'>详情</a>       ";
        			html += "	</td>                                ";
        			html += "</tr>                             ";
        			/* html += "<tr class='expand-info'>               ";
        			html += "	<td></td>         ";
        			html += "	<td colspan='8'>               ";
        			html += "		<li>发布时间：" + formatTimeStamp(r.publishTime) + "</li>         ";
        			html += "	</td>                                  ";
        			html += "</tr>                           "; */
        	}
        	$("#tbody").empty();
        	$("#tbody").append(html);
        }
        
        function add0(m){return m<10?'0'+m:m }
        function formatTimeStamp(timestamp) {
        	if ( timestamp == null || timestamp == 'null' || timestamp == '' ) {
        		return '';
        	}
	        //timestamp是整数，否则要parseInt转换
	        var time = new Date(timestamp);
	        var y = time.getFullYear();
	        var m = time.getMonth()+1;
	        var d = time.getDate();
	        var h = time.getHours();
	        var mm = time.getMinutes();
	        var s = time.getSeconds();
	        return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
        }
    </script>
</body>

</html>